<template>
  <div class="content">
    <el-dialog
      title="setting"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleCloseDialog">
      <div class="content">
        <div class="input_setting">
          <div class="input_left">
            <span>Input Setting</span>
          </div>
          <div class="input_right">
            <el-form :model="newSetting" ref="newSetting">
              <el-form-item class="bgc" label="Accent" prop="accent">
                <el-radio-group v-model="newSetting.accent" :disabled="true">
                  <el-radio label="Mandarin(Standard)"></el-radio>
                  <el-radio label="Mandarin(Taiwan)"></el-radio>
                  <el-radio label="Mandarin(Erhua)"></el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item class="bgc" label="Speaker" prop="speaker">
                <el-radio-group v-model="newSetting.speaker" :disabled="true">
                  <el-radio label="Single"></el-radio>
                  <el-radio label="Multiple"></el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item class="bgc" label="Custom Dictionary">
                <el-input
                  v-model="newSetting.custom"
                  placeholder="If you want to use your own dictionary,upload it here."
                  :disabled="true"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <div class="output_setting">
          <div class="output_left">
            <span>Output Setting</span>
          </div>
          <div class="output_right">
            <el-form :model="newSetting" ref="newSetting">
              <el-form-item prop="checkList">
                <el-checkbox-group
                  :disabled="true"
                  v-model="newSetting.checkList">
                  <el-checkbox name="type" label="Phoneme"></el-checkbox>
                  <el-checkbox name="type" label="Pinyin"></el-checkbox>
                  <el-checkbox name="type" label="Character"></el-checkbox>
                  <el-checkbox name="type" label="Word"></el-checkbox>
                  <el-checkbox name="type" label="Sentence"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>

              <div class="right_select">
                <el-form-item label="Format of Phoneme">
                  <el-select
                    :disabled="true"
                    v-model="newSetting.phoneme"
                    placeholder="——select——">
                    <el-option
                      label="MFA opinioned IPA"
                      value="MFA opinioned IPA"></el-option>
                    <el-option
                      label="Modern IPA"
                      value="Modern IPA"></el-option>
                    <el-option
                      label="Traditional IPA"
                      value="Traditional IPA"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="Format of Pinyin">
                  <el-select
                    :disabled="true"
                    v-model="newSetting.pinyin"
                    placeholder="——select——">
                    <el-option
                      label="Tone Marks"
                      value="Tone Marks"></el-option>
                    <el-option
                      label="Without Tone"
                      value="Without Tone"></el-option>
                    <el-option
                      label="Tone Numbers"
                      value="Tone Numbers"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="Format of Character">
                  <el-select
                    v-model="newSetting.character"
                    :disabled="true"
                    placeholder="——select——">
                    <el-option label="Simple" value="Simple"></el-option>
                    <el-option
                      label="Traditional"
                      value="Traditional"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="handleCloseDialog">取 消</el-button> -->
        <el-button type="primary" @click="handleCloseDialog">OK</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    handleCloseDialog: {
      type: Function
    },
    newSetting: {
      type: Object,
      default: {}
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  padding: 0px 20px;
  margin-top: 20px;

  .input_setting {
    padding: 5px;
    display: flex;
    border: 1px solid #cacaca;

    .input_left {
      width: 200px;
      border-right: 1px solid #cacaca;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        padding: 5px;
        background-color: #b7d6a3;
        color: #222;
        display: inline;
        border-radius: 5px;
        padding: 4px 10px;
      }
    }

    .input_right {
      width: 80%;
      margin-right: 50px;

      .bgc {
        background-color: #a1b8e1 !important;
        border-radius: 8px;
        margin: 10px 0px;

        .bjc_upload {
          button {
            width: 400px;
            background-color: #fff;
            color: #666;
          }
        }
      }

      .el-form{
        padding: 20px;
      }

      .el-form-item {
        display: flex;
        padding: 10px;

        .el-input {
          width: 400px;

          /deep/.el-input__inner {
            height: 30px !important;
          }
        }
      }
    }
  }

  /deep/.el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: #666;
  }
  /deep/.el-radio__input.is-disabled+span.el-radio__label {
    color: #666;
  }
  /deep/.el-input.is-disabled .el-input__inner {
    color: #222;
  }

  .el-table__row{
    padding-left: 20px;
  }

  .output_setting {
    display: flex;
    border: 1px solid #cacaca;
    padding: 5px;

    .output_left {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200px;
      border-right: 1px solid #cacaca;
      white-space: nowrap;

      span {
        padding: 5px;
        background-color: #b7d6a3;
        color: #222;
        display: inline;
        border-radius: 5px;
        padding: 4px 10px;
      }
    }

    .output_right {
      position: relative;
      width: 80%;
      padding: 20px;

      .el-checkbox-group {
        display: flex;
        flex-direction: column;
        width: 100px;
      }

      .right_select {
        width: 375px;
        height: 60px;
        margin-left: 40px;
      }
    }
  }

  .next {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    margin-top: 15px;

    button {
      background-color: #70ad47;
      color: #fff;
      width: 100px;
    }
  }
}

.output_right .el-form {
  display: flex;

  /deep/.el-checkbox{
    height: 60px;
  }
}
</style>
